<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="utf-8" %>
<%@ include file="../include/head.jsp" %>
<%@ include file="../include/top.jsp" %>
<%@ include file="../include/left.jsp" %>
<div class="main-content">

    <%@ include file="../include/navigate.jsp" %>

    <div class="container">

        <c:if test="${error != null }">
            <div class="alert alert-danger alert-dismissable">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                <strong>异常:</strong> ${error}
            </div>
        </c:if>
        <c:if test="${msg != null }">
            <div class="alert alert-success alert-dismissable">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                <strong>提示:</strong> ${msg}
            </div>
        </c:if>
		
        
        <div class="row clearfix">
			<div class="col-md-6">
				<div class="list-group">
					<c:forEach var="user" items="${users}">
						<a href="#" class="list-group-item" onclick="reloadTree(this);" id="${user.id}">${user.username}</a>
					</c:forEach>
				</div>
			</div>
			<input type="hidden" id="userId">
			<div class="col-md-6" id="treeContainer">
                <div id="tree"></div>
            </div>
        </div>
        <div style="position:fixed;bottom:0px; width:100%;" align="center">
            <%@ include file="../include/footer.jsp" %>
        </div>
    </div>

<script type="text/javascript">

	function reloadTree(button){
		
		focusChange(button);
		
		$('#tree').remove();
		$('#treeContainer').append('<div id="tree"></div>');
		treeInit(true, $(button).attr('id'));
		
		$('#userId').attr('value', $(button).attr('id'));
	}
	
	function focusChange(button){
		$(button).siblings().each(function(){
			$(this).removeClass("active");
		});
		
		$(button).addClass("active");
	}

	function treeInit(isReload, userId, roleId){
		
		if(isReload === undefined){
			tree = ${treeString};
		} else {
			tree = "";
			$.ajax({
				type: 'get',
				url: '/privilege/reloadList',
				data: {"userId": userId},
				cache: false,
				dataType: 'json',
				async: false,
				success: function(data){
					tree = eval(data);
				},
				error: function(){
					alert('failed');
				}
			});
		}
		
		var updateMethod = function(event, node) {
			
			if($("#userId").val() == ""){
				alert("请选择用户！");
				$('#tree').treeview('unselectNode', [ node.nodeId, { silent: true } ]);
				return;
			}
			
	        $.ajax({  
	        	type:'get',
	            url: '/privilege/update',
	            data: {"code": encodeURI(node.permissionCode), "userId": $('#userId').attr('value'), "type": event.type},  
	            cache:false,    
	            dataType:'json',    
	            success: function(data) {    
	                if("success" == data){
	                	alert("success");
	                } else {
	                	alert("设置权限失败！");
	                	if(event.type == "nodeSelected"){
	                		$('#tree').treeview('unselectNode', [ node.nodeId, { silent: true } ]);
	                	} else {
	                		$('#tree').treeview('selectNode', [ node.nodeId, { silent: true } ]);
	                	}
	                	
	                }
	            },    
	            error : function() {
	            	alert("设置权限失败！");
                	if(event.type == "nodeSelected"){
                		$('#tree').treeview('unselectNode', [ node.nodeId, { silent: true } ]);
                	} else {
                		$('#tree').treeview('selectNode', [ node.nodeId, { silent: true } ]);
                	}
	            }
	        });
		}
		
	    $('#tree').treeview({data: tree, multiSelect: true, selectedBackColor: '#ffffff', highlightSelected: false, showTags: true, levels: 3});
	    $('#tree').on('nodeSelected', updateMethod); 
	    $('#tree').on('nodeUnselected', updateMethod); 
	}
	
	$(document).ready(treeInit());
</script>
<%@ include file="../include/bottom.jsp" %>